<template>
	<view class="content">
		<view class="box addressBox flexBC">
			<view class="address">
				<image class="dw" :src="$getImageSrc('ic_dw2.png')" mode="widthFix"></image>
				<view class="info">
					<view class="name">{{addressInfo.township}}</view>
					<view class="detail">{{addressInfo.address}}</view>
				</view>
			</view>
			<image class="right-dw" @click="reAuthorize" v-if='!time' :src="$getImageSrc('ic_dw.png')" mode="widthFix"></image>
		</view>
		<view class="box" style="margin-bottom: 20rpx;" v-if='time'>
			<view class="box-item checkStatus">
				<view class="title">{{type==='start'?'签到':'签退'}}时间</view>
				<view class="value">{{time}}</view>
			</view>
		</view>
		<view class="box" style="height: calc(100% - 100rpx);">
			<view class="serveTip" v-if='type === "start"'>
				<view class="title">上传清洗前照片</view>
				<view class="tip" v-if='!time'>*请在开始前，告知客户你已到达，并确认服务车辆</view>
			</view>
			<view class="serveTip" v-if='type === "finish"'>
				<view class="title">上传清洗后照片</view>
			</view>
			<upload-image tip='正面' :imageSrc.sync='params.frontPhoto' :isJustShow='isJustShow'></upload-image>
			<upload-image tip='左面' :imageSrc.sync='params.leftPhoto' :isJustShow='isJustShow'></upload-image>
			<upload-image tip='右面' :imageSrc.sync='params.rightPhoto' :isJustShow='isJustShow'></upload-image>
			<view style="height: 250rpx;"></view>
		</view>
		<footer-button v-if='!time' :btnTip='btn' @clickFooter='submitFn'></footer-button>
	</view>
</template>

<script>
	import {finishOrder, startOrder, regeo} from '@/untils/api'
	export default {
		data() {
			return {
			  sn:'',
			  btn:'提交并开始服务',
			  type:'',
			  addressInfo:{},
			  time:'',
			  isJustShow:false,
			  params:{
				"gpsAddress": "",
				"lng": 0,
				"lat": 0,
				"frontPhoto": "",
				"leftPhoto": "",
				"rightPhoto": "",
				"sn": ""
			  }
			};
		},
		onShow(){
			const {type,sn} = this.$mp.query
			if(type === 'start'){
				this. btn='提交并开始服务'
				uni.setNavigationBarTitle({
					title:'开始服务'
				})
			}else{
				this. btn='提交并结束服务'
				uni.setNavigationBarTitle({
					title:'结束服务'
				})
			}
			this.type = type
			const serveInfo = this.$getStorageSync('serveInfo') || null
			// const orderInfo = this.$getStorageSync('orderInfo') || null
			if(!serveInfo){
				this.getlocation().then((res) => {
					this.addressInfo = res
					this.params.lng=res.lng
					this.params.lat=res.lat
					this.params.gpsAddress = res.address
					this.params.township = res.township
					this.params.sn = sn
				}).catch((err) => {
					console.error(err)
				})
			}else{
				const photo = serveInfo.photo.split(',')
				console.log(photo)
				this.params.frontPhoto = photo[0]
				this.params.leftPhoto = photo[1]
				this.params.rightPhoto = photo[2]
				this.time = serveInfo.createDate
				this.addressInfo.address = serveInfo.gpsAddress
				this.addressInfo.township = serveInfo.township
				this.isJustShow = true
			}
			
			// if(orderInfo){
			// 	this.params.lng=orderInfo.lng
			// 	this.params.lat=orderInfo.lat
			// 	this.params.gpsAddress = '天府广场'
			// }
			
			
		},
		onUnload(){
			this.$removeStorageSync('orderInfo')
			this.$removeStorageSync('serveInfo')
		},
		methods:{
			getlocation(){
			  return new Promise((resolve, reject) => {
				  uni.getLocation({
					type: 'wgs84',
					success:  (res) => {
						console.log('当前经纬度信息：' , res);
						this.longitude = res.longitude
						this.latitude = res.latitude
						regeo({lat:res.latitude, lng: res.longitude}).then((data) => {
							let addressInfo = {
								lat:res.latitude, 
								lng: res.longitude,
								address:data.data.address,
								township:data.data.township
								}
							resolve(addressInfo)
						}).catch((err) => {
							uni.showToast({
								title:JSON.stringify(err)
							})
							reject(null)
						})
					},
					fail:()=>{
						reject(null)
						// this.reAuthorize()
					}
				})
			  })
			},
		   reAuthorize() {
			let that = this;
			if(this.addressInfo.address){
				return false;
			}
			uni.showModal({
			  title: '提示',
			  content: '需要您同意获取定位权限',
			  success: function (res) {
				if (res.confirm) {
				  // 打开设置页面
				  uni.openSetting({
					success: function (settingData) {
					  if (settingData.authSetting['scope.userLocation']) {
						// 用户已经同意授权
						console.log('用户授权成功');
						uni.showToast({
							icon:'none',
							title: '授权成功',
							duration: 2000
						});
						that.getlocation()
					  } else {
						// 用户拒绝授权
						console.log('用户拒绝授权');
						uni.showToast({
							icon:'none',
							title: '您已拒绝了授权,无法获取定位',
							duration: 3000
						}); 
					  }
					}
				  });
				}
			  }
			});
		  },
			submitFn(){
				const {frontPhoto, leftPhoto, rightPhoto} = this.params
				if(!this.params.gpsAddress){
					this.reAuthorize()
					return false;
				}
				if(!frontPhoto || !leftPhoto || !rightPhoto){
					uni.showToast({
						icon:'none',
						title:'请上传照片'
					})
					return false
				}
				let apiUrl = this.type === 'start' ? startOrder:finishOrder;
				apiUrl(this.params).then((res) => {
					console.log('---',res)
					if(res.code - 200 === 0){
						uni.showToast({
							icon:'none',
							title:'提交成功',
							success:() => {
								uni.reLaunch({
									url:'/pages/awaitOrder/index'
								})
							}
						})
						
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					
				})
			}
		}
	}
</script>

<style lang="scss">
 .content{
	 height: 100%;
	 background: #f8f8f8;
	 padding-top: 30rpx;
	 .box{
		 overflow: scroll;
	 }
	 .addressBox{
		 margin-bottom: 30rpx;
		 box-sizing: border-box;
		 padding: 20rpx;
		 .address{
			 display: flex;
			 justify-content: flex-start;
			 align-items: center;
			 
			 .info{
				 margin-left: 10rpx;
				 .name{
					color: #2A2B2B;
					font-size: 30rpx;
				 }
				 .detail{
					 font-size: 24rpx;
					 color: #AEB3B3;
				 }
			 }
		 }
		 .dw, .right-dw{
			 width: 30rpx;
		 }
	 }
	 .serveTip{
		 width: 90%;
		 margin: 0 auto;
		 border-bottom: 1px solid #F9F9F9;
		 padding: 16rpx ;
		 margin-bottom: 20rpx;
		 .title{
			 font-size: 28rpx;
			 color: #2A2B2B;
		 }
		 .tip{
			 font-size: 24rpx;
			 color: #FF3E3E;
		 }
	 }
	 .checkStatus{
		 height: 80rpx;
		 display: flex;
		 justify-content: space-between;
		 align-items: center;
		 padding: 0 30rpx;
		 font-size: 28rpx;
	 }
 }
</style>
